bSecureCheckout /
bsecure-payments-js
| Conditions | 11 |
| Total Lines | 98 |
| Code Lines | 80 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like index.js ➔ Payment often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | // @flow |
||
| 12 | |||
| 13 | |||
| 14 | function Payment(props) { |
||
| 15 | const { addToast } = useToasts(); |
||
| 16 | const {name, country_code,phone, email, country, province, city, area, address, |
||
| 17 | order_id, currency, sub_total, total, discount, |
||
| 18 | client_id, merchant_id, store_id, client_env} = props.history.location.state?.formData || {} |
||
| 19 | useEffect(() => { |
||
| 20 | if(!props.history.location.state?.formData){ |
||
| 21 | HISTORY.replace("/") |
||
| 22 | } |
||
| 23 | |||
| 24 | responseListener(); |
||
| 25 | try { |
||
| 26 | setTransactionParameters(); |
||
| 27 | } catch (error) { |
||
| 28 | console.info("error found in setTransactionParameters", error); |
||
| 29 | } |
||
| 30 | // eslint-disable-next-line react-hooks/exhaustive-deps |
||
| 31 | }, []); |
||
| 32 | |||
| 33 | const resetFrame = () => { |
||
| 34 | document.getElementById("bSecurePaymentPluginContainer").remove(); |
||
| 35 | window.location.href= "http://" + window.location.host |
||
| 36 | } |
||
| 37 | |||
| 38 | const responseListener = () => { |
||
| 39 | bSecurePaymentsHandler.initialize(); |
||
| 40 | bSecurePaymentsHandler.onErrorAlert = function (msg) { |
||
| 41 | addToast(msg?.message, { appearance: 'error' }); |
||
| 42 | return msg; |
||
| 43 | } |
||
| 44 | bSecurePaymentsHandler.onSuccessAlert = function (msg) { |
||
| 45 | addToast(msg?.message, { appearance: 'success' }); |
||
| 46 | return msg; |
||
| 47 | } |
||
| 48 | bSecurePaymentsHandler.onValidationErrorAlert = function (msg) { |
||
| 49 | addToast(msg?.message, { appearance: 'error' }); |
||
| 50 | HISTORY.replace("/") |
||
| 51 | return msg; |
||
| 52 | } |
||
| 53 | bSecurePaymentsHandler.onProcessPaymentSuccess = function (msg) { |
||
| 54 | setTimeout(() => { |
||
| 55 | resetFrame() |
||
| 56 | }, 6000); |
||
| 57 | |||
| 58 | return msg; |
||
| 59 | } |
||
| 60 | bSecurePaymentsHandler.onProcessPaymentFailure = function (msg) { |
||
| 61 | addToast(msg?.message, { appearance: 'error' }); |
||
| 62 | HISTORY.replace("/") |
||
| 63 | return msg; |
||
| 64 | } |
||
| 65 | }; |
||
| 66 | |||
| 67 | const setTransactionParameters = () => { |
||
| 68 | delete TransactionParameters.__17seh__ ; |
||
| 69 | TransactionParameters.__00trid__ = order_id; |
||
| 70 | TransactionParameters.__01curr__ = currency; |
||
| 71 | TransactionParameters.__02trdt__ = Date.now().toString(); |
||
| 72 | TransactionParameters.__03stamt__ = sub_total; |
||
| 73 | TransactionParameters.__04damt__ = discount; |
||
| 74 | TransactionParameters.__05tamt__ = total; |
||
| 75 | TransactionParameters.__06cname__ = name; |
||
| 76 | TransactionParameters.__07ccc__ = country_code; |
||
| 77 | TransactionParameters.__08cphn__ = phone; |
||
| 78 | TransactionParameters.__09cemail__ = email; |
||
| 79 | TransactionParameters.__10ccc__ = country; |
||
| 80 | TransactionParameters.__11cstate__ = province; |
||
| 81 | TransactionParameters.__12ccity__ = city; |
||
| 82 | TransactionParameters.__13carea__ = area; |
||
| 83 | TransactionParameters.__14cfadd__ = address; |
||
| 84 | TransactionParameters.__15mid__ = merchant_id ; |
||
| 85 | TransactionParameters.__16stid__ = store_id; |
||
| 86 | TransactionParameters.__18ver__ = "1.1"; |
||
| 87 | TransactionParameters.__20red__ = window.location.href; |
||
| 88 | TransactionParameters.__21cenv__ = client_env; |
||
| 89 | const salt = client_id |
||
| 90 | let _signature = salt+"&"; |
||
| 91 | Object.keys(TransactionParameters) |
||
| 92 | .sort() |
||
| 93 | .forEach(function(v, idx, array) { |
||
| 94 | let _val = TransactionParameters[v].toString().replace(/\s/g, ''); |
||
| 95 | _signature += _val.concat(idx === array.length - 1 ? "" : "&") |
||
| 96 | }); |
||
| 97 | let _hash = CryptoJS.HmacSHA256(_signature,salt).toString() ; |
||
| 98 | TransactionParameters.__17seh__ = _hash.toUpperCase(); |
||
| 99 | try { |
||
| 100 | bSecurePayments.initialize("bSecurePaymentPluginContainer"); |
||
| 101 | } catch (error) { |
||
| 102 | console.info("error found in setTransactionParameters error: ", error); |
||
| 103 | } |
||
| 104 | }; |
||
| 105 | |||
| 106 | return ( |
||
| 107 | <> |
||
| 108 | <div id="bSecurePaymentPluginContainer"></div> |
||
| 109 | </> |
||
| 110 | ); |
||
| 115 |
